<template>
	<div class="ui-dialog" :class="setshow?'show':''" unselectable="on">
		<div class="ui-dialog-content" ref="dialog">
			<div class="ui-dialog-title"  ref="dragTitle">
				<div class="t">{{title}}</div>
				<span class="ui-dialog-close iconfont" @click="hide" v-show="isshowclose">&#xe641;</span>
			</div>
			<div class="ui-dialog-content2">
				<slot name="content"></slot>
			</div>
			<div class="ui-dialog-bottom">
				<slot name="button"></slot>
				<button class="pub-btn pub-btn-bgred pub-btn-big" v-show="isshowenter" @click="enter">{{ btnText[0]}}</button>
			</div>
		</div>
		<div class="ui-dialog-bg"></div>
	</div> 
</template>

<script>
	/*
	组件属性[
		title:标题
		msg:提示内容
		isshow:默认是否显示对话框
		isshowenter:是否显示确定按钮
		isshowclose:是否显示关闭按钮
		btnText:['确定按钮名称'] 修改按钮名称
	]
	组件事件[
		enter:点击确定触发，callback(obj[当前实例])
	]
	*/
	export default{
		props:{
			"title":{type:String,default:"对话框"},
			"msg":{type:String,default:""},
			"isshow":{type:Boolean,default:false},
			"isshowenter":{type:Boolean,default:true},
			"isshowcancel":{type:Boolean,default:false},
			"isshowclose":{type:Boolean,default:true},
			"btnText":{type:Array,default:['确定']}
		},
		data(){
			return {
				uiType:"ui-dialog",
			}
		},
		computed:{
			setshow(){
				if(this.isshow){
					this.setoffset();
				}
				return this.isshow;
			}
		},
		methods:{			
			show(){
				this.isshow=true;
			},
			hide(){
				this.isshow=false;
			},
			setoffset(){
				let viewWidth=document.documentElement.clientWidth,viewHeight=document.documentElement.clientHeight;
				let is=true,self=this;
				let fors=setInterval(function(){
					if(self.$refs.dialog){
						clearInterval(fors);
						let xy=self.$refs.dialog.offset();
						let offset=[(viewWidth-xy.width)/2,(viewHeight-xy.height)/2-40];
						if(offset[0]<0)offset[0]=0;
						if(offset[1]<0)offset[1]=0;
						self.$refs.dialog.style.left=offset[0]+"px";
						self.$refs.dialog.style.top=offset[1]+"px";
					}
				});
			},
			enter(){
				this.$emit('enter',this);
				this.hide();
			},
			cancel(){
				this.$emit('cancel',this);
				this.hide();
			}
		},
		created(){
			let self=this;
			let fors=setInterval(function(){
				if(self.$refs.dialog){
					clearInterval(fors);
					drag(self.$refs.dialog,self.$refs.dragTitle);
				}
			});
		}		
	}
</script>

<style>
	/* 自定义对话框 */
	.ui-dialog{position:fixed; left:0; top:0; visibility:hidden;z-index:998;width:100%;height: 100%;opacity:0;@include transition; user-select:none;}
	.ui-dialog-content{width:700px; min-height:100px;background: #FFFFFF;box-shadow: 0px 5px 8.46px 0.54px rgba(131, 131, 131, 0.7);border-radius: 2px;border:solid 1px #ccc; position: absolute; left: 0; top: 0; z-index: 2;}
	.ui-dialog-title{padding:5px 10px; position:relative;cursor:default; background: #DC1136;}
	.ui-dialog-title .t{font-size: 18px;color: #fff; text-align: center; font-weight: bold; }
	.ui-dialog-bottom{padding:15px 0 20px 0;text-align: center;}
	.ui-dialog-content2{padding: 15px; overflow: auto;font-size:16px;max-height:500px;}
	.ui-dialog-bg{position:absolute; z-index: 1; width: 100%; height: 100%; background:#fff; opacity: 0.5; filter: alpha(opacity=50); left: 0; top:0;}
	.ui-dialog-btn{min-width:90px;margin:0 5px;}
	.ui-dialog-close{position:absolute;right:10px;font-size:20px;width:20px;height:20px;cursor: pointer;top: 7px; transform:rotate(0);@include transition;color:#fff;line-height: 20px;}
	.ui-dialog-close:hover{transform:rotate(90deg);}
	.ui-dialog.show{opacity:1;visibility:visible;}
</style>